<template>
    <div>标题<input type="text" v-model.trim="inputTitle">日期<input type="date" v-model="selectDate"></div>
    <br>
    <button @click="SubmitEvent">提交</button>
    <br>
    <!-- 写一个原生日期选择组件 -->
    <!-- 使用原生table写一个带有增删改查的表格 -->
    <table class="container" style="display:block;overflow-y: auto;height: 250px" @scroll="onScroll">
        <thead style="height: 50px;position: sticky;top: 0;">
            <tr>
                <th>标题</th>
                <th>日期</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody class="scroll" :style="{ height: list.length * 50 + 'px' }">
            <tr class="placeholder" :style="{ height: currentIndex * 50 + 'px' }"></tr>
            <tr v-for="(item) in displayArr" :key="item.id" style="height: 50px;display: block;">
            <!-- q:下面td样式该怎么修改得和th对应 -->
            <!-- a: -->
                <td>{{ item.title }}</td>
                <td>{{ item.date }}</td>
                <td>
                    <!-- q:点击编辑时传入item.id -->
                    <button @click="handleEdit(item.title, item.date, item.id)">编辑</button>
                    <button @click="handleDelete(item.id)">删除</button>
                </td>
            </tr>
        </tbody>
    </table>
</template>

<script lang="ts">
export default {
    data() {
        return {
            list: JSON.parse(localStorage.getItem('list') || '[]'),
            inputTitle: '',
            selectDate: '',
            nowId: 0,
            onEd: false,
            currentIndex: 0,
        }
    },
    methods: {
        onScroll(e: any) {
            const scrollTop = e.target.scrollTop
            this.currentIndex = Math.floor(scrollTop / 50)
            console.log(this.currentIndex);
        },
        SubmitEvent() {
            if (!this.inputTitle) {
                alert('请输入标题')
                return
            }
            if (!this.selectDate) {
                alert('请选择日期')
                return
            }
            if (this.onEd) {
                this.list = this.list.map((item: any) => {
                    if (item.id === this.nowId) {
                        return {
                            title: this.inputTitle,
                            date: this.selectDate,
                            id: this.nowId
                        }
                    } else {
                        return item
                    }
                })
            } else {
                this.list.push({
                    title: this.inputTitle,
                    date: this.selectDate,
                    // q:获取当前时间戳
                    // id: new Date().getTime()
                    // q:三元表达式
                    // id: this.nowId ? this.nowId : new Date().getTime()
                    id: +new Date()
                })
            }
            this.saveList()
            this.onEd = false
            this.inputTitle = ''
            this.selectDate = ''
            this.nowId = 0

        },
        handleEdit(nowTitle: string, nowDate: string, id: number) {
            this.inputTitle = nowTitle
            this.selectDate = nowDate
            this.nowId = id
            this.onEd = true
        },
        handleDelete(id: number) {
            this.list = this.list.filter((item: any) => item.id !== id)
            this.saveList()
        },
        saveList() {
            localStorage.setItem('list', JSON.stringify(this.list))
        }
    },
    computed: {
        displayArr() {
            return this.list.slice(this.currentIndex, this.currentIndex + 5)
        }
    },
}
</script>

<style>
.container tr th{
    width: 200px;
}
.container tr td{
    display: inline-block;
    width: 200px;
    height: 50px;
}
</style>